<template>
<div class="frame" style="padding: 0px;">
    <div class="top-text-content bg-dark">
            <h1 class="ps-blue-text" style="height: 30px;">通用NLP抽取技术</h1>
            <h2 class="ps-black-text" style="width:550px ;height:50px">基于自研的NLP抽取技术，专注智能信息抽取13年</h2>
            <h2 class="ps-black-text" style="width:550px ;height:50px">通过领先的深度学习技术，支持对简体中文、英文、西欧主流语言等20种语言进行快速、精准的检测和识别</h2>
          </div>
    <div class="ps-container" style="height: 800px">
    <!-- 顶部导航栏 -->
    <div class="ps-navbar">
      <el-menu :default-active="activeMenu" mode="horizontal" @select="handleMenuSelect" background-color="#E2EAF2">
        <el-menu-item index="entity">实体要素抽取</el-menu-item>
        <el-menu-item index="relationship">关系要素抽取</el-menu-item>
        <el-menu-item index="event">事件要素抽取</el-menu-item>
        <el-menu-item index="other">其他</el-menu-item>
      </el-menu>
    </div>

    <!-- 内容展示区域 -->
    <div class="ps-content" >
      <h2 class="ps-title">{{ titles[activeMenu] }}</h2>
      <p class="ps-description" style="text-align:left">{{ descriptions[activeMenu] }}</p>

      <!-- 模型介绍区域，带滚动条 -->
      <div class="ps-model-list" style="background-color: transparent;">
        <div v-for="model in models[activeMenu]" :key="model.name" class="ps-model-card"  style="background-color: transparent;">
          <!-- 左侧模型图片与名称 -->
          <div class="ps-model-left">
            <img :src="model.image" alt="Model Image" class="ps-model-image" />
            <div class="ps-model-name">{{ model.name }}</div>
          </div>
          <!-- 右侧来源与介绍 -->
          <div class="ps-model-right">
            <div class="ps-model-source">来源: {{ model.source }}</div>
            <div class="ps-model-description">{{ model.description }}</div>
            <el-button type="primary" size="small" @click="openForm" style="margin-left: auto; width: 10%;">申请使用</el-button>
          </div>
        </div>
      </div>
    </div>  
  </div>
    <div class="last-container">
    <!-- 展示文字 -->
    <div class="last-text">立即探索，解锁更多产品详情</div>

    <!-- 按钮，点击后弹出表单对话框 -->
    <el-button type="primary" @click="openForm">申请试用</el-button>

    <!-- 表单对话框 -->
    <el-dialog title="申请试用" :visible.sync="dialogVisible" width="600px" @close="resetForm">
      <el-form ref="form" :model="form" label-width="80px" class="form-container">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="职业">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="法律相关领域" value="law"></el-option>
            <el-option label="教育相关领域" value="education"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="使用性质">
          <el-radio-group v-model="form.resource">
            <el-radio label="商用"></el-radio>
            <el-radio label="个人使用"></el-radio>
                        <el-radio label="政府单位使用"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="申请说明">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>

        <!-- 按钮组 -->
        <el-form-item class="button-group">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</div>
</template>

<script>
import { getModelList } from "@/api/productService";
export default {
  
    name: "productService",
    data() {
        return {
            moreVisible: false, // 控制更多年份弹框的显示与隐藏
            dialogVisible: false, // 控制对话框显示
            form: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
            },
            activeMenu: "entity",
      titles: {
        entity: "实体要素抽取",
        relationship: "关系要素抽取",
        event: "事件要素抽取",
        other: "其他",
      },
      descriptions: {
        entity: "实体要素识别是指在非结构化的文本中识别出命名实体，然后对其进行分类，例如人名、地名等。本平台针对实体要素识别任务提出了基于控制注意力、基于平面化句子表示、基于实体边界组合等数十种模型，通过依据实体要素特征，有效地解决了实体要素识别任务。",
        relationship: "实体要素识别是指在非结构化的文本中识别出实体之间的关联关系，例如人物之间的亲属关系、事件之间的因果关系等。本平台针对关系要素抽取任务提出了基于多副本实体重建的实体关系抽取方法、基于神经化特征工程的实体关系抽取方法、基于特征组合的图卷积神经网络关系提取方法等数十种方法，通过依据实体之间的关系特征，有效地解决了关系要素抽取任务。",
        event: "事件要素识别是指在非结构化的文本中识别出实体之间的关联关系，例如人物之间的亲属关系、事件之间的因果关系等。本平台针对事件要素抽取任务提出了基于二维语义增强的事件论元抽取方法，通过依据实体之间的关系特征，有效地解决了事件要素抽取任务。",
        other: "这是其他的介绍内容。",
      },models: {
        entity: [
          {
            name: "模型 A",
            image: require("@/assets/images/productService_img/method.png"),
            source: "来源 A",
            description: "这是模型 A 的描述信息。",
          },
          {
            name: "模型 B",
            image: require("@/assets/images/productService_img/method.png"),
            source: "来源 B",
            description: "这是模型 B 的描述信息。",
          },
          {
            name: "模型 c",
            image: require("@/assets/images/productService_img/method.png"),
            source: "来源 C",
            description: "这是模型 C 的描述信息。",
          },
        ],
        relationship: [
          {
            name: "模型 C",
            image: require("@/assets/images/productService_img/method.png"),
            source: "来源 C",
            description: "这是模型 C 的描述信息。",
          },
          {
            name: "模型 D",
            image: "@/assets/images/aboutUs_img/图片2.png",
            source: "来源 D",
            description: "这是模型 D 的描述信息。",
          },
        ],
        event: [
          {
            name: "模型 E",
            image: "path/to/imageE.png",
            source: "来源 E",
            description: "这是模型 E 的描述信息。",
          },
          {
            name: "模型 F",
            image: "path/to/imageF.png",
            source: "来源 F",
            description: "这是模型 F 的描述信息。",
          },
        ],
        other: [
          {
            name: "模型 G",
            image: "path/to/imageG.png",
            source: "来源 G",
            description: "这是模型 G 的描述信息。",
          },
        ],
      },
        };
  },
  mounted() {
    this.fetchModelData(); // 在组件加载时调用
  },
  methods: {
    async fetchModelData() {
      console.log("调用 getModelResult 方法...");
      try {
        const data = await getModelList(); // 调用获取数据的方法
        console.log("获取到的模型数据:", data); // 输出获取到的数据
        // this.models = data; // 将数据赋值给 models
      } catch (error) {
        console.error("获取模型数据时出错:", error);
      }
    },
    openForm() {
      this.dialogVisible = true; // 打开对话框
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$message.success('申请已提交！');
          this.dialogVisible = false;
          this.resetForm();
        } else {
          this.$message.error('请完整填写表单！');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields(); // 重置表单内容
    },
    handleMenuSelect(index) {
      this.activeMenu = index;
    },
    applyUse(modelName) {
      alert(`申请使用模型: ${modelName}`);
      this.fetchModelData(); // 在组件加载时调用
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.bg-dark {
  background: url('../../assets/images/productService_img/banner@2x.png') no-repeat center center; /* 设置背景图片 */
  background-size: cover; /* 使背景图覆盖整个区域 */
  height: 520px; /* 设置行的高度，根据需要进行调整 */
}
.top-text-content {
  display: flex;
  flex-direction: column; /* 纵向排列 */
  align-items: flex-start; /* 左对齐 */
      position: relative;
  padding-left: 200px; /* 向右移动文字 */
  padding-top: 100px; /* 向下移动文字 */
}
.ps-blue-text {
  color: rgb(47, 107, 236); /* 蓝色文字 */
  font-size: 32px; /* 设置字号 */
  font-weight: bold;
//   padding-bottom: 30px; /* 可以调整为你需要的间距 */
}

.ps-black-text { 
  color: black; /* 黑色文字 */
  font-size: 28px; /* 设置字号，比上面的文字小 */
  width: 550px; /* 固定宽度 */
}

.ps-container {
      background-color: #E2EAF2;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Arial, sans-serif;
}

.ps-navbar {
  width: 80%;
  background-color: #b6ddf7;
  box-shadow: none;

}
.ps-navbar .el-menu.el-menu--horizontal {
    border-bottom: solid 0px #e6e6e6; 
}
.ps-navbar .el-menu-item.is-active {
  background-color: white !important; /* 选中项背景设为白色 */
  color: #333 !important; /* 设置选中项的字体颜色 */
}
.ps-content {
  width: 80%;
  margin-top: 20px;
  text-align: center;
}

.ps-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.ps-description {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

.ps-model-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 550px;
  overflow-y: auto;
  width: 100%;
  padding: 20px;
  background-color: #f9f9f9;
}
.ps-model-list::-webkit-scrollbar {
  display: none;
}
.ps-model-card {
  display: flex;
  width: 100%;
  height: 400px;
  margin-bottom: 15px;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
}

.ps-model-left {
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: center;  
}

.ps-model-image {
  width: 80%;
  height: 80%;
  object-fit: cover;
}

.ps-model-name {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.ps-model-right {
  flex: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 20px;
}

.ps-model-source {
  font-size: 14px;
  color: #888;
}

.ps-model-description {
  font-size: 14px;
  color: #444;
  margin-bottom: 10px;
}
.last-container {
  background: url('../../assets/images/aboutUs_img/guide_bg.png') no-repeat center center; /* 设置背景图片 */
  display: flex;    
  align-items: center;
  justify-content: center;
  background-color: #f6f8fb;
  padding: 40px;
  height: 200px;
  border: 1px solid #e0e0e0;
}

.last-text {
  font-size: 20px;
  color: white;
  margin-right: 20px;
}

.form-container {
  text-align: left; /* 表单内容靠左对齐 */
}

.button-group {
  display: flex;
  justify-content: center; /* 按钮居中显示 */
}
</style>
  